<template>
  <div class="purchase-order-change">
    <!-- 筛选区域 -->
    <el-form :model="filterForm" inline class="filter-form" label-width="80px">
      <!-- 订单日期范围 -->
      <el-form-item label="订单日期">
        <el-date-picker
          v-model="filterForm.orderDateRange"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :default-value="[new Date('2025-06-01'), new Date('2025-06-24')]"
        />
      </el-form-item>

      <!-- 变更日期范围 -->
      <el-form-item label="变更日期">
        <el-date-picker
          v-model="filterForm.changeDateRange"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :default-value="[new Date('2025-06-01'), new Date('2025-06-24')]"
        />
      </el-form-item>

      <!-- 变更人（多选 + 搜索） -->
      <el-form-item label="变更人">
        <el-select
          v-model="filterForm.changeUser"
          multiple
          filterable
          placeholder="请选择变更人"
        >
          <el-option
            v-for="user in changeUsers"
            :key="user.value"
            :label="user.label"
            :value="user.value"
          />
        </el-select>
      </el-form-item>

      <!-- 订单编号 -->
      <el-form-item label="订单编号">
        <el-input
          v-model="filterForm.orderNo"
          placeholder="请输入订单编号"
          clearable
        />
      </el-form-item>

      <!-- 变更原因 -->
      <el-form-item label="变更原因">
        <el-input
          v-model="filterForm.reason"
          placeholder="请输入变更原因"
          clearable
        />
      </el-form-item>

      <!-- 查询按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="success" @click="handleExport">导出</el-button>
      <el-button type="info" @click="handlePrint">打印</el-button>
    </div>

    <!-- 变更表核心表格 -->
    <el-table
      :data="tableData"
      border
      :header-cell-style="{ background: '#F8F9FA' }"
    >
      <el-table-column prop="orderDate" label="订单日期" width="120" />
      <el-table-column prop="orderNo" label="订单编号" width="150" />
      <el-table-column prop="version" label="版本号" width="100" />
      <el-table-column prop="changeDate" label="变更日期" width="120" />
      <el-table-column prop="changeUser" label="变更人" width="180" />
      <el-table-column prop="reason" label="变更原因" width="150" />
      <el-table-column prop="changeType" label="变更类型" width="120" />
      <el-table-column prop="spCode" label="商品编号" width="120" />
      <el-table-column prop="spName" label="商品名称" width="150" />
      <el-table-column prop="supplier" label="供应商" width="180" />
    </el-table>
  </div>
</template>

<script>
export default {
  name: "PurchaseOrderChangeTable",
  data() {
    return {
      // 筛选条件
      filterForm: {
        orderDateRange: ["2025-06-01", "2025-06-24"],
        changeDateRange: ["2025-06-01", "2025-06-24"],
        changeUser: [], // 多选变更人
        orderNo: "",
        reason: "",
      },
      // 变更人选项（模拟）
      changeUsers: [
        { value: "woeci-CwAADd_fymJmnw8pqlXQpUnPcQ", label: "变更人A" },
        { value: "woeci-CwAAES8DQoHN5O63q4fAl8_Mw", label: "变更人B" },
        { value: "woeci-CwAAKQ5gZwPp1xuQ-PyQkAd2Cg", label: "变更人C" },
        { value: "woeci-CwAAIPZuWAi_ULGogwr9l8mA_g", label: "变更人D" },
        { value: "woeci-CwAAMJeoCB-07jW1cSD_tNt7Ig", label: "变更人E" },
      ],
      // 表格数据（5条模拟数据）
      tableData: [
        {
          orderDate: "2025-06-01",
          orderNo: "PO20250601001",
          version: "V1.0",
          changeDate: "2025-06-05",
          changeUser: "woeci-CwAADd_fymJmnw8pqlXQpUnPcQ",
          reason: "需求变更",
          changeType: "数量调整",
          spCode: "SP0001",
          spName: "巧克力",
          supplier: "供应商A",
        },
        {
          orderDate: "2025-06-02",
          orderNo: "PO20250602002",
          version: "V1.1",
          changeDate: "2025-06-06",
          changeUser: "woeci-CwAAES8DQoHN5O63q4fAl8_Mw",
          reason: "供应商替换",
          changeType: "更换供应商",
          spCode: "SP0002",
          spName: "果味饮料",
          supplier: "供应商B",
        },
        {
          orderDate: "2025-06-03",
          orderNo: "PO20250603003",
          version: "V2.0",
          changeDate: "2025-06-07",
          changeUser: "woeci-CwAAKQ5gZwPp1xuQ-PyQkAd2Cg",
          reason: "规格变更",
          changeType: "修改规格",
          spCode: "SP0003",
          spName: "脆饼",
          supplier: "供应商C",
        },
        {
          orderDate: "2025-06-04",
          orderNo: "PO20250604004",
          version: "V1.2",
          changeDate: "2025-06-08",
          changeUser: "woeci-CwAAIPZuWAi_ULGogwr9l8mA_g",
          reason: "商品替换",
          changeType: "更换商品",
          spCode: "SP0004",
          spName: "果汁",
          supplier: "供应商D",
        },
        {
          orderDate: "2025-06-05",
          orderNo: "PO20250605005",
          version: "V1.3",
          changeDate: "2025-06-09",
          changeUser: "woeci-CwAAMJeoCB-07jW1cSD_tNt7Ig",
          reason: "交货期调整",
          changeType: "修改日期",
          spCode: "SP0005",
          spName: "虾片",
          supplier: "供应商E",
        },
      ],
    };
  },
  methods: {
    // 多条件筛选逻辑
    handleQuery() {
      const filtered = this.tableData.filter((item) => {
        // 订单日期范围校验
        const orderDateMatch =
          item.orderDate >= this.filterForm.orderDateRange[0] &&
          item.orderDate <= this.filterForm.orderDateRange[1];

        // 变更日期范围校验
        const changeDateMatch =
          item.changeDate >= this.filterForm.changeDateRange[0] &&
          item.changeDate <= this.filterForm.changeDateRange[1];

        // 变更人校验（多选包含）
        const userMatch =
          this.filterForm.changeUser.length === 0 ||
          this.filterForm.changeUser.includes(item.changeUser);

        // 订单编号模糊匹配
        const orderNoMatch =
          !this.filterForm.orderNo ||
          item.orderNo.includes(this.filterForm.orderNo);

        // 变更原因模糊匹配
        const reasonMatch =
          !this.filterForm.reason ||
          item.reason.includes(this.filterForm.reason);

        return (
          orderDateMatch &&
          changeDateMatch &&
          userMatch &&
          orderNoMatch &&
          reasonMatch
        );
      });

      this.$message.success(`共筛选出 ${filtered.length} 条数据`);
      console.log("筛选结果：", filtered);
      // 实际项目中可更新tableData为filtered
    },
    // 导出功能（示例）
    handleExport() {
      this.$message.info("导出功能待对接后端接口实现");
    },
    // 打印功能（示例）
    handlePrint() {
      this.$message.info("打印功能待实现样式定制");
    },
  },
};
</script>

<style scoped>
.purchase-order-change {
  padding: 24px;
  background: #fff;
}

.filter-form {
  margin-bottom: 16px;
}

.action-bar {
  margin: 12px 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.el-table {
  margin-top: 10px;
}
</style>